<template>
	<jk-dialog
		v-model="showDialog"
		title="员工-详情"
		width="800px"
		:show-confirm-btn="false"
		:show-cancel-btn="false"
		:show-close-btn="true"
		@on-close="onVisibleChange(false)"
		@on-visible-change="onVisibleChange"
	>
		<el-form ref="ruleForm" :model="ruleForm" :show-message="false" label-width="100px">
			<el-row>
				<el-col :span="12">
					<el-form-item class="margin-bottom-10" label="姓名">
						<span class="read-only-2">{{ ruleForm.name }}</span>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item class="margin-bottom-10" label="员工编号">
						<span class="read-only-2">{{ ruleForm.code }}</span>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item class="margin-bottom-10" label="性别">
						<span class="read-only-2">{{ Number(ruleForm.gender) ? '男' : '女' }}</span>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item class="margin-bottom-10" label="出生日期">
						<span class="read-only-2">{{ ruleForm.birthday }}</span>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item class="margin-bottom-10" label="手机号">
						<span class="read-only-2">{{ ruleForm.mobile }}</span>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item class="margin-bottom-10" label="办公电话">
						<span class="read-only-2">{{ ruleForm.tel }}</span>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item class="margin-bottom-10" label="身份证号">
						<span class="read-only-2">{{ ruleForm.idCard }}</span>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item class="margin-bottom-10" label="状态">
						<span class="read-only-2">{{ ruleForm.onJob ? '在职' : '离职' }}</span>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item class="margin-bottom-10" label="备注">
						<span class="read-only-2">{{ ruleForm.remark }}</span>
					</el-form-item>
				</el-col>
			</el-row>
			<el-tabs v-model="activeTab" type="border-card">
				<el-tab-pane name="1">
					<span slot="label"><i class="el-icon-date"></i> 部门信息</span>
					<el-row>
						<el-col :span="12">
							<el-form-item class="margin-bottom-10" label="部门">
								<span class="read-only-2">{{ ruleForm.deptName }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="区域" class="margin-bottom-10">
								<span class="read-only-2">{{ ruleForm.workshopName }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item class="margin-bottom-10" label="班组">
								<span class="read-only-2">{{ ruleForm.groupName }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item class="margin-bottom-10" label="岗位">
								<span class="read-only-2">{{ ruleForm.postName }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item class="margin-bottom-10" label="岗位编码">
								<span class="read-only-2">{{ ruleForm.postCode }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item class="margin-bottom-10" label="直接上级">
								<span class="read-only-2">{{ ruleForm.leaderName }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item class="margin-bottom-10" label="入职日期">
								<span class="read-only-2">{{ ruleForm.entryTime }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item class="margin-bottom-10" label="开户行">
								<span class="read-only-2">{{ ruleForm.openingBank }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item class="margin-bottom-10" label="银行卡号">
								<span class="read-only-2">{{ ruleForm.bankCardNumber }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item class="margin-bottom-10" label="家庭住址">
								<span class="read-only-2">{{ ruleForm.homeAddress }}</span>
							</el-form-item>
						</el-col>
					</el-row>
				</el-tab-pane>
				<el-tab-pane name="2">
					<span slot="label"><i class="el-icon-user"></i> 账号信息</span>
					<el-row>
						<el-col :span="12">
							<el-form-item class="margin-bottom-10" label="用户">
								<span class="read-only-2">{{ ruleForm.userName }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item class="margin-bottom-10" label="登录名">
								<span class="read-only-2">{{ ruleForm.username }}</span>
							</el-form-item>
						</el-col>
					</el-row>
				</el-tab-pane>
			</el-tabs>
		</el-form>
	</jk-dialog>
</template>
<script>
    import { getEmp } from '../../../api/system/emp';
    export default {
        props: {
            dialogState: {
                type: Boolean,
                default: false
            },
            dataId: {
                type: Number,
                default: null
            }
        },
        data() {
            return {
                activeTab: '1',
                contentLoading: false,
                showDialog: false,
                ruleForm: {},
                props: {
                    expandTrigger: 'hover',
                    checkStrictly: false,
                    label: 'name',
                    value: 'id',
                    children: 'children'
                }
            };
        },
        watch: {
            dialogState(newVal) {
                this.showDialog = newVal;
                if (newVal) {
                    this.getDetailRequest();
                }
            }
        },
        methods: {
            getDetailRequest() {
                return getEmp(this.dataId).then(res => {
                    if (res.data.status === 200) {
                        this.ruleForm = res.data.res;
                        this.contentLoading = false;
                    }
                });
            },
            onVisibleChange(e) {
                this.$emit('on-visible-change', e);
            }
        }
    };
</script>
